<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <link rel="stylesheet" href="css/shopping.css">
</head>
<body>
<section id="shopping">
    <div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div>
    <div id="cartList">
        <h2>最新加入的商品</h2>
        <ul>
            <li><img src="images/makeup.jpg"></li>
            <li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
            <li>¥558.00×1<br/>删除</li>
        </ul>
        <div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>
    </div>
</section>
<script>
    /*document.getElementById("cartList").style.display="none";
    function over(){
        document.getElementById("cart").style.backgroundColor="#ffffff";
        document.getElementById("cart").style.zIndex="100";
        document.getElementById("cart").style.borderBottom="none";
        document.getElementById("cartList").style.display="block";
        document.getElementById("cartList").style.position="relative";
        document.getElementById("cartList").style.top="-1px";
    }
    function out(){
        document.getElementById("cart").style.backgroundColor="#f9f9f9";
        document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
        document.getElementById("cartList").style.display="none";
    }*/

    function over(){
     document.getElementById("cart").className="cartOver";
     document.getElementById("cartList").className="cartListOver";
        //alert(document.getElementById("cartList").display);
        //alert(document.getElementById("cartList").currentStyle.display);  //使用currentStyle获取属性值
        /*使用getComputedStyle获取属性值
        var cartList=document.getElementById("cartList");
        alert(document.defaultView.getComputedStyle(cartList,null).display);*/
     }
     function out(){
     document.getElementById("cart").className="cartOut";
     document.getElementById("cartList").className="cartListOut";
     }

</script>
</body>
</html>